iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0

今天來介紹Switch, switch開關股冥思一介是有開啟與關閉兩種狀態,它跟另一個元件CheckBox有些相似,CheckBox有勾選和未勾選兩種狀態。


Switch

  • Palette移動Switch到白色區域
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454U2m8UuzGIc.png

  • activity_main.xml 介面
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454SErUycsLsB.png
    (設置完成)
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454GHVKpT4luk.png

  • activity_main.xml switch程式碼
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454NadeiMzQhk.png
    textOff => 設定 Switch 關閉時顯示的文字
    textOn => 設定 Switch 開啟時顯示的文字
    showText => 設定 Switch 打開或關閉時是否顯示文字
    switchPadding => 設定 Switch 元件與左側標題之間的距離

  • MainActivity
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454M6JjpD0yeo.png
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454mkmrqV73MY.png
    當我按下按鈕後,使用if判斷式,讓下方的TextView會跟著變動。

  • 執行畫面
    (關燈)
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454KfmMWpHGTB.png
    (開燈)
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454mSEtjpPjSf.png

CheckBox

  • 在Palette搜尋CheckBox,拖移CheckBox到白色區域
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454kqZzfb2aTS.png

  • activity_main.xml 介面
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454GFjYtC8zje.png
    (設置完成)
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454qfpmNTvvlF.png

  • activity_main.xml CheckBox程式碼
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454BJq3Jqvfaf.png
    android:text => 設定核取方塊右方的文字

(完整程式碼)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/main_lightSwitch_sh"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="電燈開關"
        android:showText="true"
        android:textOff="關"
        android:textOn="開"
        app:layout_constraintBottom_toTopOf="@+id/guideline5"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        tools:ignore="UseSwitchCompatOrMaterialXml" />

    <CheckBox
        android:id="@+id/main_checkbox_cb"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="是人類嗎?"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline7" />

    <Button
        android:id="@+id/main_sure_btn"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="確認"
        app:layout_constraintBottom_toTopOf="@+id/guideline10"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline9" />

    <TextView
        android:id="@+id/main_lightMsg_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:textSize="20dp"
        android:textStyle="bold"
        android:text="關燈"
        android:gravity="center"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.55" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.65" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.7" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
  • MainActivity
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454YijEHkEk2C.png
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454BqbCGans1R.png
    使用if判斷式,當CheckBox為勾選狀態按鈕可以點擊,反之為不可點擊。
    checkBox.setChecked => true為已勾選的CheckBox狀態,false為未勾選的CheckBox狀態
    setEnabled => true為可點擊的Button的狀態,false為不可點擊的Button的狀態
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454ixPxThuZNV.png

(完整程式碼)

public class MainActivity extends AppCompatActivity {
    //宣告
    private Switch lightSwitch;
    private TextView lightMsgTextView;
    private CheckBox checkBox;
    private Button sureButton;
    private Context context = this;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);

        //綁定
        lightSwitch = findViewById(R.id.main_lightSwitch_sh);
        lightMsgTextView = findViewById(R.id.main_lightMsg_tv);
        checkBox = findViewById(R.id.main_checkbox_cb);
        sureButton = findViewById(R.id.main_sure_btn);

        lightSwitch.setOnCheckedChangeListener((buttonView, isChecked) -> {
            if (isChecked) {
                lightMsgTextView.setTextColor(Color.parseColor("#FFF9AD40"));
                lightMsgTextView.setText("開燈");
            } else {
                lightMsgTextView.setTextColor(Color.parseColor("#ABA9A7"));
                lightMsgTextView.setText("關燈");
            }
        });

        //按鈕先設置為不可點擊
        sureButton.setEnabled(false);

        //CheckBox狀態改變觸發動作
        checkBox.setOnCheckedChangeListener(new CheckBox.OnCheckedChangeListener()
        {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
            {
                //判斷CheckBox是否有勾選,同mCheckBox.isChecked()
                if(isChecked)
                {
                    //CheckBox狀態 : 已勾選
                    checkBox.setChecked(true);
                    sureButton.setEnabled(true);
                }
                else
                {
                    //CheckBox狀態 : 未勾選
                    checkBox.setChecked(false);
                    sureButton.setEnabled(false);
                }
            }
        });

        //按鈕
        sureButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context, "你好! 人類", Toast.LENGTH_SHORT).show();
            }
        });
    }
}
  • 執行畫面
    (未勾選)
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454pJBC8Lwzox.png
    (勾選)
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454ZdQtGvMwEK.png
    (點擊Button)
    https://ithelp.ithome.com.tw/upload/images/20240924/20168454EvCHgLwFLw.png

以上就是Switch與CheckBox的應用,使用他們的地方也不少。
p.s.也可以客製化Switch喔~可自行上網搜尋


上一篇
元件篇-Spinner與客製化Spinner Day15
下一篇
元件篇-Dialog(上) Day17
系列文
Android 元件總動員 - 運用與實踐元件指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言